﻿<!--implement my images -->
<div style="border: 1px solid blue">
    <div class="row">
        <h1>
            {{title}}
        </h1>
    </div>
    <div class="row">
        <div ng-repeat="(key, album) in albums" id="{{key}}">
            <div class="row">
                <div class="well col-md-10 col-md-offset-1">
                    <div class="row">

                        <div class="col-md-12">

                            <div class="row showHideBtns">
                                <div class="col-md-12">
                                    <button class="btn btn-default" ng-click="showImages($event)">Show</button>
                                    <button class="btn btn-default" ng-click="hideImages($event)">Hide</button>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <h3 class="title">
                                        {{key}}
                                    </h3>
                                    <button style="font-weight: bold" class="btn btn-default">Delete Album</button>
                                </div>
                            </div>
                            <!--                            start   -->
                            
                            <div class="col-md-12 currentAlbumWrapper">
                                <div class="row">

                                    <div class="col-md-10 col-md-offset-1">
                                        <div style="min-height: 200px;position: relative" class="col-md-3" ng-repeat="pic in album">
                                            <div class="myAlbum">
<!--                                             pic-->
                                            </div>
<!--                                            //-->
                                        </div>
                                    </div>
                                </div>

                                <div class="row backWardForWardBtns">
                                    <div class="col-md-12">
                                        <div class="col-md-4 col-md-offset-4">
                                            <button style="font-weight: bold" class="btn btn-default pull-left {{key}}" ng-click="goForward(key)">Forward</button>
                                            <!--                                            <button style="font-weight: bold" class="btn btn-default pull-right {{key}}" ng-click="goBackward(key)">BackWard</button>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            

                            <!--  end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $("div[class*='container']").css("border", "4px solid gray");
    $("div[class*='row']").css("border", "4px solid red");
    $("div[class*='col']").css("border", "4px solid burlywood");

    $("div[class*='col']").css("margin-top", "2px");
    $("div[class*='col']").css("margin-botton", "2px");
    $("div[class*='row']").css("margin-top", "2px");
    $("div[class*='row']").css("margin-bottom", "2px");
</script>